import { Table } from "antd";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import type { TableProps } from "antd";
import dayjs from "@/utils/dayjs";
import { TZ } from "@/utils/env";
import { changeParams, getUserFlowAsync } from "@/store/userFlow/userFlowSlice";

export interface DataType {
  uuid:string,
  c_time: number,
  channel: number,
  country_code: string,
  gold: number,
  latest_gold: number,
  source: number,
  user_id: number,
  username: string
}

export default function MTable() {
  const dispatch = useAppDispatch();
  const { params, table } = useAppSelector((state) => state.userFlow);
  const {
    config: { data: { data: { user_channel_list = [], wallet_source_map = [] } = {} } = {} } = {},
  } = useAppSelector((state) => state.app);

  const columns: TableProps<DataType>["columns"] = [
    {
      title: '创建时间',
      key:'c_time',
      dataIndex:'c_time',
      align:'center',
      render: text => dayjs.unix(text).tz(TZ).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      title: '渠道',
      key:'channel',
      dataIndex:'channel',
      align:'center',
      render: text => user_channel_list?.find?.(i => i.value === text)?.label
    },
    {
      title: '国家',
      key:'country_code',
      dataIndex:'country_code',
      align:'center',
    },
    {
      title: '金币',
      key:'gold',
      dataIndex:'gold',
      align:'center',
    },
    {
      title: '之前金币',
      key:'latest_gold',
      dataIndex:'latest_gold',
      align:'center',
    },
    {
      title: '流水类型',
      key:'source',
      dataIndex:'source',
      align:'center',
      render: text => wallet_source_map?.find?.(i => i.value === text)?.label
    },
    {
      title: '用户ID',
      key:'user_id',
      dataIndex:'user_id',
      align:'center',
    },
    {
      title: '用户名',
      key:'username',
      dataIndex:'username',
      align:'center',
    },
  ];

  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      pagination={{
        total: table?.data?.data?.total,
        current: params?.page,
        pageSize: params?.page_size,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total: number, range: [number, number]): string =>
          `${range[0]}-${range[1]}条/共${total}条`,
        onChange: (page: number, pageSize: number): void => {
          dispatch(changeParams({ page, page_size: pageSize }));
          dispatch(
            getUserFlowAsync({
              ...params,
              page,
              page_size: pageSize,
            })
          );
        },
      }}
      dataSource={table?.data?.data?.page_data || []}
      size="small"
      rowKey="uuid"
    />
  );
}
